<template>
  <div>
    <div class="history__search">
      <div class="search__container">
        <div class="search__input-wrapper">
          <el-input
            v-model="searchInput"
            class="search__input"
            :clearable="true"
            placeholder="输入历史对话问答关键词"
            @input="handleSearchInput"
            @clear="handleClear"
          >
            <template slot="prefix">
              <svg-icon icon-class="search-btn1" class="fs-16"></svg-icon>
            </template>
          </el-input>
        </div>
      </div>
      <div class="actions ml-4" :class="{ actions__search: historyStore.activeType === 'search' }">
        <el-tooltip content="我的收藏" placement="top" :open-delay="300">
          <svg-icon
            icon-class="star-btn"
            class="fs-16 star-btn"
            :class="{ 'is-active': historyStore.activeType === 'favorites' }"
            @click="changeToStar"
          ></svg-icon>
          <template slot="content">
            <div class="tooltip-content">我的收藏</div>
          </template>
        </el-tooltip>
        <el-tooltip content="删除全部" placement="top" :open-delay="300">
          <svg-icon
            icon-class="del-btn"
            class="fs-16 del-btn"
            :class="{ 'disabled': !historyStore.all.length }"
            @click="handleDeleteAll"
          ></svg-icon>
          <template slot="content">
            <div class="tooltip-content">删除全部</div>
          </template>
        </el-tooltip>
      </div>
    </div>
    <div class="search__tips" v-show="historyStore.activeType === 'search'">
      找到 <span class="link">{{ historyStore.count }}</span> 条搜索结果
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { debounce } from '@/utils'
import { clearAllConversation } from '@/api/chat'
export default {
  name: 'HistorySearch',
  inject: ['resetNode'],
  components: {
  },
  data () {
    return {
      searchInput: ''
    }
  },
  computed: {
    ...mapGetters(['historyStore'])
  },
  created () {
    this.handleSearchInput = debounce((errMsg) => {
      this.$emit('search', this.searchInput)
    }, 300, false)
  },
  mounted () {
  },
  methods: {
    changeToStar () {
      this.$emit('to-star')
    },
    handleClear () {
      setTimeout(() => {
        this.$store.dispatch('history/setStatus', true)
      }, 10)
    },
    async handleClearSession () {
      const { data } = await clearAllConversation()
      if (data?.code === 200) {
        this.$PsMessage({ message: '删除成功' })
        this.$store.dispatch('history/clear')
        this.$store.dispatch('chat/reset')
        this.resetNode()
        this.$store.dispatch('history/setHistoryTips', false)
        this.$store.dispatch('history/getHistoryAll', { page: 1 })
      }
    },

    handleDeleteAll  () {
      if (!this.historyStore.all?.length) {
        return
      }
      // 删除所有历史记录
      this.$PsMessageBox({
        title: '删除会话',
        message: '您确定删除所有的会话记录吗？<br /> 删除后不可恢复！',
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        // iconClass: 'warning',
        width: 280,
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            this.handleClearSession()
          }
          done()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.history__search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 15px 0 15px;
}
.search__container {
  // flex: 1 1 100%;
  width: 250px;
}
.search__input-wrapper {
  display: flex;
  align-items: center;
  height: 34px;
  // padding: 0 12px;
  margin: 0 0 0 0;
  // border: 1px solid $border-color-input;
  border-radius: 5px;
  box-sizing: border-box;
  /deep/ .el-input__prefix {
    line-height: 40px;
    color: #fff;
    left: 12px;
    opacity: 0.7;
  }
  /deep/ .el-input--prefix .el-input__inner {
    padding-left: 40px ;
    color: #fff;
    border-radius: 5px 5px 5px 5px;
    border: 1px solid rgba(78,95,255,0.5);
    background: rgba($color: $color-white, $alpha: 0.3);
    &::placeholder {
      opacity: 0.5;
    }
  }
}
.actions {
  flex: 0;
  display: flex;
  align-items: center;
  transition: flex 0.3s ease-in-out;
  white-space: nowrap;
  .svg-icon {
    margin-left: 8px;
    cursor: pointer;
    transition: color linear 0.3s;
    // &:hover {
    //   color: $color-primary;
    // }
  }
  .del-btn {
    color: rgba($color: #fff, $alpha: 0.7);
    &:hover {
      color: rgba($color: #fff, $alpha: 1.0);
    }
    &.disabled:hover {
      color: rgba($color: #fff, $alpha: 0.7);
    }
  }
  .star-btn {
    color: $color-gray;
    &:hover {
      color: $star-btn-active;
    }
    &.is-active {
      color: $star-btn-active;
    }
  }
  &.actions__search {
    flex: 0 0 0px;
    overflow: hidden;
  }
}
.search__tips {
  font-size: $font-size-base;
  padding: 10px 0 0 28px;
}
</style>
